<template>
    <div class="view-query">
        <h2 class="section-title flex items-center">
            <svg t="1749147268071" class="icon mr-2" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="9813" width="24" height="24">
                <path
                    d="M859.976 69.113H166.141c-13.788 0-25.352 11.119-25.352 25.352v839.273c0 13.788 11.119 25.352 25.352 25.352h693.835c13.789 0 25.352-11.119 25.352-25.352V94.465c0-14.233-11.564-25.352-25.352-25.352zM681.625 614.841h-59.154V464.51H548.64v150.331h-29.354V464.51h-73.387v150.331h-36.47V464.51H348.94v150.331h-26.686V464.51h-69.383v150.331h-61.378V391.124H835.07v223.717H726.101l18.681-8.895-67.16-141.436-54.706 25.797 58.709 124.534z m105.854-285.095l47.59-114.75v114.75h-47.59z m47.59-210.374v81.836l-51.148-20.903-59.599 144.549 12.008 4.893H631.812V173.189H557.98v156.557h-27.576V173.189h-73.831v156.557H425.44V173.189h-78.278v156.557h-34.248V173.189h-60.488v156.557h-61.377V119.372h644.02zM191.048 676.219h643.576v99.183l-48.479-21.794-64.046 142.77 26.241 12.009H618.023V759.391h-60.487v148.996h-38.25V759.391h-73.387v148.996h-40.918V759.391h-60.488v148.996h-35.581V759.391h-60.488v148.996h-57.375V676.219h-0.001z m591.984 232.168l51.593-115.194v115.194h-51.593z"
                    fill="#8bc34a" p-id="9814"></path>
            </svg>
            视图查询
        </h2>
        <button @click="getViewNames" class="view-btn">
            获取视图列表
        </button>

        <!-- 修改视图列表的布局类 -->
        <ul class="view-list mt-8 grid grid-cols-2 gap-4"> <!-- 使用Grid布局，两列，间距4 -->
            <li v-for="view in viewNames" :key="view" class="view-item">
                <button @click="queryView(view)" :class="['view-btn', { 'active-view': view === currentViewName }]">
                    {{ view }}
                </button>
            </li>
        </ul>

        <div v-if="viewData.length" class="view-data mt-6">
            <h3 class="sub-title">视图数据：{{ currentViewName }}</h3>

            <div class="overflow-x-auto">
                <table class="view-table min-w-full">
                    <thead>
                        <tr>
                            <th v-for="(val, key) in viewData[0]" :key="key" class="view-header">
                                {{ key }}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(row, index) in viewData" :key="index" class="view-row">
                            <td v-for="(val, key) in row" :key="key" class="view-cell">
                                {{ val }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const viewNames = ref([])
const viewData = ref([])
const currentViewName = ref('')
const loading = ref(false)

const getViewNames = async () => {
    loading.value = true
    try {
        const res = await axios.get('/api/views')
        viewNames.value = res.data
    } catch (error) {
        console.error('获取视图列表失败:', error)
    } finally {
        loading.value = false
    }
}

const queryView = async (viewName) => {
    loading.value = true
    currentViewName.value = viewName // 选中时更新当前视图名称
    try {
        const res = await axios.get(`/api/views/${viewName}`)
        viewData.value = res.data
    } catch (error) {
        console.error(`查询视图 ${viewName} 失败:`, error)
        viewData.value = []
    } finally {
        loading.value = false
    }
}
</script>

<style scoped>
/* 移除原有的flex-wrap样式，使用Grid布局 */
.view-list {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
    /* 保持间距 */
    /* 以下为新增布局样式 */
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    /* 两列，每列最小150px */
    gap: 1.5rem;
    /* 列间距和行间距 */
    justify-items: start;
    /* 子项左对齐 */
}

/* 按钮默认样式 */
.view-btn {
    min-width: 120px;
    padding: 0.6rem 1rem;
    background-color: #ffffff;
    /* 亮白色背景 */
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

/* 选中状态样式（浅绿色背景，与表格背景一致） */
.active-view {
    background-color: rgba(84, 194, 88, 0.2);
    /* 20%透明度的绿色背景 */
    border-color: #54c258;
    /* 加深边框颜色 */
    color: #006020;
    /* 深绿色文字 */
}

.view-item {
    margin-bottom: 1rem;
}

.view-data {
    background: rgba(84, 194, 88, 0.5);
    padding: 1.5rem;
    border-radius: 12px;
}

/* 其他原有样式保持不变... */
.view-table {
    width: 100%;
    border-collapse: collapse;
}

.view-header {
    padding: 1rem;
    text-align: left;
    background-color: #E0F7FA;
    color: #006064;
    border-bottom: 2px solid #B2EBF2;
}

.view-row:nth-child(even) {
    background-color: #FAFAFA;
}

.view-cell {
    padding: 1rem;
    border-bottom: 1px solid #EEEEEE;
}
</style>